<template>
  <div class="PersonalCenter">
    <el-container>
        <el-header style="height: 360px;">
            <NavTenYear></NavTenYear>
            <div class="img">
                <el-image :src="backgroundUrl" fit="cover"></el-image>
                <div class="headimg" @mouseover="goChange" @mouseout="leaveChange">
                    <div class="mask" v-show="changeHead" @click="changeHeader">更换头像</div>
                    <el-image :src="headerUrl" fit="cover"></el-image>
                </div>
                <div class="describe">
                    <div class="name">{{nick_name}}</div>
                    <div class="autograph" @click="goChangeAutograph">
                        {{autograph}}
                        <input ref="inp" type="text" v-model="autograph" v-show="changeAutograph" @blur="sendAutograph">
                    </div>
                </div>
                <el-upload
                    class="upload"
                    ref="upload"
                    action="none"
                    :on-change="handleChange"
                    :file-list="fileList"
                    :auto-upload="false">
                    <el-button slot="trigger" size="small" type="info">更换背景图</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="info" @click="submitUpload">上传</el-button>
                </el-upload>
            </div>
        </el-header>
        <el-main>
            <SmallNav :isAdmit="is_admit"></SmallNav>
            <div class="main">
                <router-view></router-view>
            </div>
        </el-main>
        <el-footer>
            <AnotherFooter></AnotherFooter>
        </el-footer>
    </el-container>
  </div>
</template>

<script>
import { nanoid } from 'nanoid';
import SmallNav from './SmallNav'
import AnotherFooter from '@/components/AnotherFooter/index.vue';
export default {
    name: "PersonalCenter",
    data() {
        return {
            changeHead:false,
            autograph:'',
            changeAutograph:false,
            fileList: [],
            time: null,
            user:null,
            backgroundUrl:'',
            headerUrl:'',
            nick_name:'',
            is_admit:0
        };
    },
    //传递简介
    // provide() {
    //     return {
    //         busAutograph: this.autograph,
    //     }
    // },
    created(){
        this.$store.dispatch('registerAndLogin/reqLoginJudge').then((result)=>{
            this.user = result.data.data;
            this.backgroundUrl = this.user.background_url + `?fix=${nanoid(5)}`
            this.headerUrl = this.user.header_url + `?fix=${nanoid(5)}`
            this.nick_name = this.user.user_nick_name
            this.is_admit = this.user.is_admit
        })
    },
    mounted(){
    },
    methods: {
        goChange() {
            this.changeHead = !this.changeHead;
        },
        leaveChange(){
            this.changeHead = !this.changeHead;
        },
        goChangeAutograph(){
            this.changeAutograph = true;
            let t = setTimeout(() => {
                this.$refs.inp.focus();
                clearTimeout(t);
            },0)
        },
        sendAutograph(){
            this.changeAutograph = false;
            console.log('发送修改请求',this.autograph);
            if(this.autograph.length > 30){
                this.$message({
                    message: "不能超过30个字",
                    type: "warning",
                });
                let t = setTimeout(() => {
                    this.$refs.inp.focus();
                    clearTimeout(t);
                },0)
            }else{
                //发送服务器签名
                this.$store.dispatch('personalCenter/reqChangeSignature', this.autograph);
            }
        },
        //上传图片
        submitUpload() {
            //使用fromData手动上传,为了promise实时渲染数据
            let formData = new FormData();
            formData.append('file',this.fileList[0].raw)
            this.$store.dispatch('personalCenter/reqSendbkimage', formData).then((result)=>{
                if(result.data.status == '200'){
                    this.backgroundUrl = this.user.background_url + `?fix=${nanoid(5)}`
                    this.fileList = [];
                    this.$refs.upload.clearFiles();
                    this.$message({
                        message:result.data.message,
                        type: "success",
                    });
                }else{
                    this.$message({
                        message:result.data.message || '上传失败',
                        type: "error",
                    });
                }
            });
        },
        //上传只能有一个
        handleChange(file, fileList){
            if (fileList && fileList.length >= 2) {
                fileList.shift();
            }
            if(file.size/1024/1024 > 1.5){
                this.$message({
                    message: "图片大小不能超过1.5M",
                    type: "warning",
                });
                fileList.shift();
            };
            this.fileList = [file];
        },
        changeHeader(){
            if(!this.time){
                this.time = setTimeout(()=>{
                    this.$router.replace({
                    name:'HeadSet',
                    query:{fix:`${nanoid(5)}`},
                    params:{from:'2'}
                })
                window.scrollTo({
                    top: 200,
                    behavior: "smooth"
                });
                this.time = null
             },100)
            }
        }
    },
    watch: {
        user(newValue, oldValue) {
            this.autograph = this.user.signature
        },
    },
    components: { SmallNav, AnotherFooter },
}
</script>

<style lang="less" >
    .PersonalCenter{
        background-color: #f4f5f7;
        .el-container{
            .el-header{
                padding: 0;
                display: flex;
                align-items: center;
                flex-direction: column;
                .img{
                    width: 80%;
                    height: 300px;
                    position: relative;
                    user-select: none;
                    &>.el-image{
                        width: 100%;
                        height: 300px;
                    }
                    &>.headimg{
                        height: 60px;
                        width: 60px;
                        position: absolute;
                        bottom: 20px;
                        left: 20px;
                        border: 3px solid rgb(94, 91, 91);
                        border-radius: 50%;
                        overflow: hidden;
                        &>.el-image{
                            width: 100%;
                            height: 100%;
                            z-index: 1;
                        }
                        &>.mask{
                            height: 60px;
                            width: 60px;
                            background: rgba(0, 0, 0, .3);
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            z-index: 99;
                            text-align: center;
                            color: white;
                            line-height: 60px;
                            font-family: 'FZZYJT';
                            font-size: 13px;
                            cursor: pointer;
                        }

                    }
                    &>.describe{
                        height: 60px;
                        width: 1000px;
                        position: absolute;
                        font-family: 'FZZYJT';
                        bottom: 16px;
                        left: 100px;
                        &>div{
                            font-family: inherit;
                            color: white;
                        }
                        .name{
                            font-size: 18px;
                            font-weight: bolder;
                            margin-bottom: 10px;
                        }
                        .autograph{
                            margin-top:10px ;
                            font-size: 13px;
                            height: 20px;
                            line-height: 20px;
                            width: 730px;
                            color: rgba(255,255,255,.7);
                            box-sizing:border-box;
                            text-indent: 5px;
                            margin-left: -5px;
                            position: relative;
                            &>input{
                                outline: none;
                                box-sizing: border-box;
                                height: 20px;
                                width: 730px;
                                border: none;
                                position: absolute;
                                bottom: 0px;
                                left: 0px;
                                font-family:"FZZYJT";
                                text-indent: 5px;
                                transform: translate(-1px,-1px);
                            }
                            &:hover{
                                background: rgba(255, 255, 255,.3);
                                border-radius: 3px;
                                border: 1px solid white;
                                transform: translate(-1px,-1px);
                                cursor: text;
                            }
                            &:hover input{
                                transform: translate(-1px,1px);
                            } 
                        }
                    }
                    &>.upload{
                        height: 68px;
                        position: absolute;
                        right: 50px;
                        top: 50px;
                        .el-upload{
                            .el-button{
                                span{
                                    font-family: 'FZZYJT';
                                }
                            }
                        }
                        .el-button{
                            span{
                                font-family: 'FZZYJT';
                            }
                        }
                        ul{
                            li{
                                background: white;
                            }
                        }
                    }
                }
            }
            .el-main{
                padding: 10px;
                padding-left: 0px;
                padding-right: 0px;
                width: 80%;
                margin: 0 auto;
                .main{
                    box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
                    width: 100%;
                    height: auto;
                    border: 1px solid rgba(128, 128, 128, 0.3);
                    box-sizing: border-box;
                }
            }
        }
    }
</style>